<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>scroll</title>
		
		<link rel="stylesheet" rev="stylesheet" href="css/bg.css" />
	</head>
	<body>
        <div style="height:50px;"></div>
		<div id="panel" style="position:absolute;height:480px;width:480px;overflow:hidden;z-index:1;background-color:gray;">
			
			<div id="bg" style="background-image:url('images/sunset.jpg');z-index:100;height:600px;width:800px;position:absolute;">bg</div>
			
			<div id="units" style="position:absolute;z-index:200;top:100px;left:100px;height:200px;width:600px;background-color:red;">units</div>
			
			<div id="people" style="color:#ffffff;position:absolute;z-index:300;top:100px;left:100px;height:100px;width:100px;background-color:blue;">people</div>
		
		</div>
		<div style="height:50px;"></div>		
		
		<script type="text/javascript" src="lib/jquery/jquery-1.3.2.js" charset="utf-8"></script>
		<script language="JavaScript">
			
			var panel = document.getElementById("panel");
			
			var x, y, down = false;
			
			panel.onmousedown = function( e ){
				x = e.clientX;
				y = e.clientY;
				panel.style.cursor = "pointer";
				down = true;	
			};
			
			panel.onmousemove = function( e ){
				if (down) {
					if (x != e.clientX) 
						panel.scrollLeft -= e.clientX - x;
					
					if (y != e.clientY) 
						panel.scrollTop -= e.clientY - y;
					
					x = e.clientX;
					y = e.clientY;
				}				
			};
			
			panel.onmouseup = function(){
				down = false;
				panel.style.cursor = "";	
			};
			
			
			
		</script>
		
	</body>
</html>
